<template>
	<view class="container">
		<view class="header">
			<view class="title">
				<p>消息{{MessageStore.count}}</p>
				<uni-icons type="compose" size="30"></uni-icons>
			</view>
			<uni-icons class="icon" type="settings-filled" size="30" @click="goSetting"></uni-icons>
		</view>
		<view class="message">
			<view class="" v-for="(item, index) in messages" :key="index">
				<uni-list-chat :avatar-circle="true" :title="item.title" :avatar="item.img" :note="item.content"
					:clickable="true" @click="goBack(index)" :time="item.time" badge-positon="left" badge-text="dot">
				</uni-list-chat>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import { useMessageStore } from '@/stores/message';
	const MessageStore = useMessageStore()
	const value = ref();

	const messages = ref([{
			type: 'order',
			title: '订单消息',
			time: '3分钟前',
			content: '你的订单已完结',
			img: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E6%B6%88%E6%81%AF/u2352.svg'
		},
		{
			type: 'interaction',
			title: '互动消息',
			time: '5小时前',
			content: '@用户1008600评论了你的内容',
			img: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E6%B6%88%E6%81%AF/u2344.svg'
		},
		{
			type: 'system',
			title: '系统消息',
			time: '23小时前',
			content: '你提交的个人信息审核通过',
			img: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E6%B6%88%E6%81%AF/u2323.svg'
		},
		{
			type: 'travel',
			title: '果汁分你一半',
			time: '2天前',
			content: '[游记消息]',
			img: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E6%B6%88%E6%81%AF/u2331.svg'
		},
		{
			type: 'travel',
			title: '飞来飞去',
			time: '1周前',
			content: '老炮来北京玩啊~',
			img: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E6%B6%88%E6%81%AF/u2339.svg'
		}
	]);

	const goBack = (index) => {
		console.log(index)
		if (index === 0) {
			uni.navigateTo({
				url: '/pagesC/messageView/messageList'
			});
		} else if(index === 1){
			uni.navigateTo({
				url: '/pagesC/messageView/interactionMessage'
			});
		}else if(index === 2){
			uni.navigateTo({
				url: '/pagesC/messageView/systemMessageDetails'
			});
		}else if(index === 3){
			uni.navigateTo({
				url: '/pagesC/messageView/privateMessage'
			});
		}else{
			uni.navigateTo({
				url: '/pagesC/messageView/privateMessage'
			});
		}

	};
	const goSetting = () => {
		uni.navigateTo({
			url: '/pagesC/messageView/messageSettings'
		});
	};
</script>

<style scoped>
	.container {
		/* width: 100%; */
		padding: 10px;
	}

	.header {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title {
		display: flex;
		align-items: center;
		font-size: 36rpx;
	}

	.message {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.icon {
		position: fixed;
		right: 20rpx;
	}

	.img {
		width: 40rpx;
		height: 40rpx;
	}

	.iconfont {
		font-size: 20rpx;
	}

	.time {
		font-size: 12rpx;
		color: #999;
	}

	.message-content {
		margin-top: 5rpx;
	}

	.uni-badge-left-margin {
		margin-left: 10rpx;
	}
</style>